iT邦幫忙

2025 iThome 鐵人賽

DAY 1
1
Vue.js

每天一點 Vue.js,30 天做出一個雅思學習應用系列 第 1

專案介紹:Vue.js + 雅思學習目標

  • 分享至 

  • xImage
  •  

大家好!這是我參加鐵人賽的第一天文章 🎉。
這次我選擇的主題是 「Vue.js + 雅思學習目標」,為什麼會把前端框架和英文考試放在一起呢?
原因很簡單:一方面我想藉由實作來強化 Vue3 的使用經驗,另一方面也希望能透過程式的力量,設計一套能幫助自己備考雅思的練習工具。

我打算用 Vue.js 建立一個小型的「雅思學習平台」。這個平台會包含幾個模組:

  1. 單字發音:利用 Web Speech API 來做 TTS(Text-to-Speech),讓我可以快速聽單字發音。
  2. 聽力練習:支援音檔播放與題目答題區,模擬雅思聽力的場景。
  3. 口說模組:結合錄音與即時轉文字(STT),讓我能練習口說並檢查發音準確度。
  4. 寫作練習:Task 1 與 Task 2 的輸入區,內建字數統計器,未來甚至想嘗試加上文法錯誤提示。

透過這樣的專案,我不僅能每天寫一點 Vue.js 的程式碼,也能同時為雅思考試做準備。鐵人賽的30天,我會逐步分享從設計到實作的過程,包含元件拆解、API 使用、UI 設計思路,甚至是我在備考中遇到的心得。

希望最後能完成一個「可以真正拿來練習」的學習工具,也期待這段旅程能帶給正在學習 Vue.js 或準備雅思的你一些啟發!


系列文
每天一點 Vue.js,30 天做出一個雅思學習應用1
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Wolke
iT邦研究生 4 級 ‧ 2025-10-10 17:54:23

感謝 未知作者 的精彩分享!

JavaScript 生態系統真的很豐富,這樣的分享對開發者很有幫助。

實際的程式碼範例很有幫助,讓理論更容易理解。

也歡迎版主有空參考我的系列文「南桃AI重生記」:https://ithelp.ithome.com.tw/users/20046160/ironman/8311

如果覺得有幫助的話,也歡迎訂閱支持!

我要留言

立即登入留言